<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #canvas {
            background-color: #FFF;
        }
        body {
            background-color: #000;
            /*font-family: "Microsoft YaHei", sans-seri;*/
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="500"></canvas>
</body>
<script>
    let canvas = document.querySelector('#canvas');
    let ctx = canvas.getContext('2d');

    let [cx, cy, r] = [500, 300, 100];
    let arr = [
        { data: 300,  bg: '#ff5700' },
        { data: 200,  bg: '#ff97aa' },
        { data: 100,  bg: '#cccccc' }
    ];

    function d2a(n) {
        return n * Math.PI / 180;
    }

    function pie(start, end, bg) {
        ctx.beginPath();

        ctx.fillStyle = bg;
        let x = cx + Math.cos(d2a(start)) * r;
        let y = cy + Math.sin(d2a(start)) * r;
        ctx.moveTo(cx, cy);
        ctx.lineTo(x, y);
        ctx.arc(cx, cy, r, d2a(start), d2a(end), false);
        ctx.fill();

        ctx.closePath();
    }

    let max = 0;
    for (let i = 0, l = arr.length; i < l; i++) {
        max += arr[i].data;
    }

    let n = 0;
    arr.forEach((item) => {
        let arg = item.data / max * 360;
        pie(n, n + arg, item.bg);
        n += arg;
    })

</script>
</html>